<template>
  <div>
    <div id="bar2"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("bar2"));

      this.chart.setOption({
        title: {
          text: "实时热度",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20
          },
          top: "3%",
          left: "10%"
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, 0)",
          textStyle: {
            color: "#FFF"
          }
          // axisPointer: {
          // 	type: "shadow",
          // 	label: {
          // 		show: true,
          // 	},
          // },
        },
        grid: {
          left: "10%",
          top: "18%",
          right: "5%",
          bottom: "15%"
        },
        xAxis: {
          data: [
            "宜宾第五初级中学",
            "王场初级中学",
            "商周镇小学",
            "凉水井中学",
            "正兴中学",
            "文昌中学",
            "富加中学"
          ],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#163a5f",
              width: 2
            }
          },
          axisTick: {
            show: false, //隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#BDD8FB", //X轴文字颜色
              fontSize: 12
            },
            interval: 0,
            formatter: function(value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 4; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#BDD8FB",
              fontSize: 12
            },

            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.15)"
                // type: 'dashed', // dotted 虚线
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#163a5f",
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#BDD8FB",
                fontSize: 12
              }
            }
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#BDD8FB",
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                width: 1,
                color: "#CED2DB"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false, //隐藏X轴轴线
              lineStyle: {
                color: "#163a5f",
                width: 2
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#797A7F",
                fontSize: 12
              }
            }
          }
        ],
        series: [
          {
            name: "下载数",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              // color: new graphic.LinearGradient(0, 0, 0, 1, [
              //    {
              //       offset: 0,
              //       color: "#00A2FF",
              //    },
              //    {
              //       offset: 1,
              //       color: "#00CCD2",
              //    },
              // ]),
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0.1,
                    color: "#13D5FC" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#2059B8" // 100% 处的颜色
                  }
                ]
              },
              barBorderRadius: [20, 20, 20, 20]
            },
            label: {
              show: true,
              position: "top",
              distance: 0,
              color: "#1ACDDC",
              formatter: "{c}" + "次"
            },
            data: [63, 99, 65, 85, 75, 78, 55]
          },
          {
            // name: '背景',
            type: "bar",
            barWidth: "15px",
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: "-110%",
            data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,0.039)",
                barBorderRadius: [20, 20, 20, 20]
              }
            },
            tooltip: {
              show: false
            },
            zlevel: 9
          }
        ]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#bar2 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>